import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import styles from './index.module.scss';
import Typography from '../../components/typography';
import loading from '../../assets/loading/loading.gif';

const { Text } = Typography;

const Loading = (props) => {
  // 拿到当前数据
  const [step, setStep] = useState(0);
  const history = useHistory();
  useEffect(() => {
    const timer = setTimeout(() => {
      if (step < 100) {
        setStep((step) => step + 1);
      }
    }, 50);
    return () => {
      clearTimeout(timer);
    };
  }, [step]);
  useEffect(() => {
    if (step === 100) {
      history.replace({
        pathname: '/result',
        state: props.location.state,
      });
    }
  });

  return (
    <div className={styles.loading}>
      <div className={styles.main}>
        <img src={loading} alt="" className={styles.loadingGif} />
        <div className={styles.context}>
          <Text type="test_result">测试报告生成中...{step}%</Text>
        </div>
      </div>
    </div>
  );
};

export default Loading;
